<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家政服务分类</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
            max-width: 750px;
            margin: 0 auto;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .service-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
        }
        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-blue-600 text-white p-4 sticky top-0 z-10">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-2">
                    <i class="fas fa-home text-blue-600 text-xl"></i>
                </div>
                <span class="font-bold text-lg">家政服务</span>
            </div>
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索服务..." class="py-1 px-3 pr-8 rounded-full text-sm text-gray-800 w-32 focus:outline-none">
                    <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
                </div>
                <i class="fas fa-user-circle text-xl"></i>
            </div>
        </div>
    </header>

    <!-- 城市切换 -->
    <div class="bg-white p-4 border-b border-gray-200">
        <div class="flex items-center">
            <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i>
            <span class="text-gray-700 mr-2">当前城市：</span>
            <span class="font-medium text-blue-600">北京市</span>
            <i class="fas fa-chevron-down text-gray-500 ml-1 text-sm"></i>
        </div>
    </div>

    <!-- 分类主体区 -->
    <main onclick="window.location.href='service-list.html'" class="p-4">
        <!-- 家政服务 -->
        <div class="mb-8">
            <h2 class="text-xl font-bold mb-4 flex items-center">
                <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2">
                    <i class="fas fa-broom"></i>
                </div>
                家政服务
            </h2>
            <div class="grid grid-cols-2 gap-4">
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-baby"></i>
                    </div>
                    <h3 class="font-medium mb-1">月嫂服务</h3>
                    <p class="text-gray-500 text-sm">专业月嫂，科学护理</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-child"></i>
                    </div>
                    <h3 class="font-medium mb-1">育儿嫂服务</h3>
                    <p class="text-gray-500 text-sm">专业育儿，健康成长</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-user-nurse"></i>
                    </div>
                    <h3 class="font-medium mb-1">保姆服务</h3>
                    <p class="text-gray-500 text-sm">专业保姆，贴心服务</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-broom"></i>
                    </div>
                    <h3 class="font-medium mb-1">居家保洁</h3>
                    <p class="text-gray-500 text-sm">专业清洁，焕然一新</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3 class="font-medium mb-1">开荒保洁</h3>
                    <p class="text-gray-500 text-sm">新房开荒，彻底清洁</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-couch"></i>
                    </div>
                    <h3 class="font-medium mb-1">家居护理</h3>
                    <p class="text-gray-500 text-sm">家具保养，延长寿命</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-boxes"></i>
                    </div>
                    <h3 class="font-medium mb-1">收纳服务</h3>
                    <p class="text-gray-500 text-sm">空间整理，井然有序</p>
                </a>
            </div>
        </div>

        <!-- 康养服务 -->
        <div class="mb-8">
            <h2 class="text-xl font-bold mb-4 flex items-center">
                <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-2">
                    <i class="fas fa-spa"></i>
                </div>
                康养服务
            </h2>
            <div class="grid grid-cols-2 gap-4">
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-green-100 text-green-600">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3 class="font-medium mb-1">中医理疗</h3>
                    <p class="text-gray-500 text-sm">传统中医，调理身体</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-green-100 text-green-600">
                        <i class="fas fa-hands"></i>
                    </div>
                    <h3 class="font-medium mb-1">中医推拿</h3>
                    <p class="text-gray-500 text-sm">经络疏通，缓解疲劳</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-green-100 text-green-600">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <h3 class="font-medium mb-1">健康养生</h3>
                    <p class="text-gray-500 text-sm">科学养生，健康生活</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-green-100 text-green-600">
                        <i class="fas fa-wheelchair"></i>
                    </div>
                    <h3 class="font-medium mb-1">养老护理</h3>
                    <p class="text-gray-500 text-sm">专业护理，安享晚年</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-green-100 text-green-600">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3 class="font-medium mb-1">居家养老</h3>
                    <p class="text-gray-500 text-sm">居家照护，亲情陪伴</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-green-100 text-green-600">
                        <i class="fas fa-hospital"></i>
                    </div>
                    <h3 class="font-medium mb-1">定点养老</h3>
                    <p class="text-gray-500 text-sm">专业机构，全面照护</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-green-100 text-green-600">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="font-medium mb-1">社区养老</h3>
                    <p class="text-gray-500 text-sm">社区服务，邻里互助</p>
                </a>
            </div>
        </div>

        <!-- 钟点工服务 -->
        <div class="mb-8">
            <h2 class="text-xl font-bold mb-4 flex items-center">
                <div class="w-6 h-6 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mr-2">
                    <i class="fas fa-clock"></i>
                </div>
                钟点工服务
            </h2>
            <div class="grid grid-cols-2 gap-4">
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-orange-100 text-orange-600">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <h3 class="font-medium mb-1">做饭服务</h3>
                    <p class="text-gray-500 text-sm">家常美食，营养健康</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-orange-100 text-orange-600">
                        <i class="fas fa-procedures"></i>
                    </div>
                    <h3 class="font-medium mb-1">陪诊服务</h3>
                    <p class="text-gray-500 text-sm">医院陪同，安心就诊</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-orange-100 text-orange-600">
                        <i class="fas fa-user-shield"></i>
                    </div>
                    <h3 class="font-medium mb-1">看护服务</h3>
                    <p class="text-gray-500 text-sm">专业看护，安全可靠</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-orange-100 text-orange-600">
                        <i class="fas fa-broom"></i>
                    </div>
                    <h3 class="font-medium mb-1">卫生清洁</h3>
                    <p class="text-gray-500 text-sm">快速清洁，焕然一新</p>
                </a>
                <a href="service-list.html" class="bg-white rounded-lg p-4 shadow-sm card-hover block">
                    <div class="service-icon bg-orange-100 text-orange-600">
                        <i class="fas fa-book"></i>
                    </div>
                    <h3 class="font-medium mb-1">辅导服务</h3>
                    <p class="text-gray-500 text-sm">学业辅导，提升成绩</p>
                </a>
            </div>
        </div>
    </main>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2 max-w-750 mx-auto">
        <a href="user-home.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-home text-lg mb-1"></i>
            <span>首页</span>
        </a>
        <a href="categories.html" class="nav-tab active flex flex-col items-center px-4 py-1 text-xs">
            <i class="fas fa-list text-lg mb-1"></i>
            <span>分类</span>
        </a>
        <a href="member-exclusive.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-crown text-lg mb-1"></i>
            <span>会员专享</span>
        </a>
        <a href="../class/business-school.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-graduation-cap text-lg mb-1"></i>
            <span>商学院</span>
        </a>
        <a href="user-profile.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-user text-lg mb-1"></i>
            <span>我的</span>
        </a>
    </div>

    <script>
        // 简单的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 卡片悬停效果
            const cards = document.querySelectorAll('.card-hover');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1)';
                });
                card.addEventListener('mouseleave', function() {
                    this.style.boxShadow = '';
                });
            });

            // 城市选择点击事件
            const citySelector = document.querySelector('.fa-chevron-down').parentElement;
            citySelector.addEventListener('click', function() {
                alert('城市选择功能将在小程序中实现');
            });
        });
    </script>
</body>
</html>